<template>
  <!-- 左侧个人信息区域 -->
  <div class="w-full shadow-lg rounded-sm p-3 md:w-1/4">
    <!-- 个人头像 -->
    <div class="flex justify-center">
      <img
        src="https://beloved-1308416229.cos.ap-chengdu.myqcloud.com/images/avatar.jpg"
        alt="Avatar"
        class="w-10 h-10 rounded-sm shadow-md ring-2 ring-gray-200 dark:ring-gray-600"
      />
    </div>
    <!-- 个人信息 -->
    <div class="mt-8 text-center">
      <h1 class="text-xl font-bold text-gray-800 dark:text-white">LYC</h1>
      <p class="text-sm text-gray-600 dark:text-gray-400 mt-2">QQ:3288566340</p>
      <p class="text-sm text-gray-600 dark:text-gray-400 mt-2">
        热爱分享,正在学习Electron跨平台桌面端开发!
      </p>

      <p>
        <a class="text-sm text-blue-400" href="https://electron.nodejs.cn/"
          >ElectronDocs</a
        >
      </p>
      <p>
        <a class="text-sm text-blue-400" href="https://www.nodeapp.cn/"
          >NodeJSDocs</a
        >
      </p>
      <p>
        <a
          class="text-sm text-blue-400"
          href="https://developer.mozilla.org/zh-CN/"
          >JavaScriptDocs</a
        >
      </p>
    </div>
    <!-- 社交链接 -->
    <div class="mt-5 flex justify-center space-x-4">
      <a
        href="https://github.com/Beloved-Kiku"
        class="text-gray-500 hover:text-gray-800 dark:hover:text-gray-200"
      >
        <My-svg-icon class="w-3 h-3" name="github"></My-svg-icon>
      </a>
      <a
        href="https://gitee.com/belovedLYC"
        class="text-gray-500 hover:text-gray-800 dark:hover:text-gray-200"
      >
        <My-svg-icon class="w-3 h-3" name="gitee"></My-svg-icon>
      </a>
      <a
        href="https://www.yuque.com/beloved-x5krn"
        class="text-gray-500 hover:text-gray-800 dark:hover:text-gray-200"
      >
        <My-svg-icon class="w-3 h-3" name="yuque"></My-svg-icon>
      </a>
    </div>
  </div>
</template>

<script setup></script>

<style lang="scss" scoped></style>
